---
title: Render Page
description: Learn how to use the renderPage method to create an image of a full PDF page.
searchable: true
---

# renderPage

Renders a full PDF page into an image.

## Signature

```typescript
renderPage(
  doc: PdfDocumentObject,
  page: PdfPageObject,
  options?: PdfRenderPageOptions
): PdfTask<T>;
````

## Description

This is the primary method for creating a visual representation of a PDF page. It renders the entire page content, including text, graphics, and optionally annotations, into an image buffer. The output format, scaling, and rotation can be customized via the `options` parameter.

The generic type `T` will be a `Blob` in browser environments and a `Buffer` in Node.js, depending on the configured `imageDataConverter`.

## Parameters

| Name | Type | Description |
| :--- | :--- | :--- |
| **`doc`** | `PdfDocumentObject` | The handle of the document to render from. |
| **`page`** | `PdfPageObject` | The specific page object within the document to render. |
| **`options`** | `PdfRenderPageOptions` | (Optional) An object to customize the rendering output. |

### `PdfRenderPageOptions` Details

| Option | Type | Description |
| :--- | :--- | :--- |
| **`scaleFactor`** | `number` | The render scaling factor (zoom level). **Default**: `1.0`. |
| **`rotation`** | `Rotation` | The rotation to apply in degrees (`0`, `90`, `180`, `270`). **Default**: `Rotation.Degree0`. |
| **`dpr`** | `number` | The Device Pixel Ratio, used for rendering crisp images on high-resolution screens. **Default**: `1`. |
| **`imageType`** | `'image/webp' \| 'image/png' \| 'image/jpeg'` | The output image format. **Default**: `'image/webp'`. |
| **`withAnnotations`**| `boolean` | Set to `true` to include annotations in the rendered image. **Default**: `false`. |

## Returns

`PdfTask<T>`

A **`Task`** that resolves with the rendered image (`Blob` or `Buffer`). This can be displayed in an `<img>` tag, drawn on a canvas, or saved to a file.

The `Task` will be rejected if the document or page handle is invalid.

See [Concepts: Tasks](../tasks.md) for more on how to handle asynchronous operations.

## Example

```typescript
// Assuming 'engine' and an open 'document' object are available

async function renderFirstPage(doc) {
  try {
    const firstPage = doc.pages[0];
    
    const imageBlob = await engine.renderPage(doc, firstPage, {
      scaleFactor: 1.5, // Render at 150% zoom
      withAnnotations: true,
    }).toPromise();

    // In a browser, you can create a URL to display the image
    const imageUrl = URL.createObjectURL(imageBlob);
    document.getElementById('my-image-element').src = imageUrl;

  } catch (error) {
    console.error('Failed to render page:', error);
  }
}
```

## See Also

  - [renderPageRect](render-page-rect.md)
